<template>
  <div class="bank">
    <div class="bank_top">
      <div class="bank_inline">
        <span class="bank_search">
          <el-select v-model="question.quType" clearable placeholder="请选择" @change="search">
            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </span>
        <span class="bank_search">
          <el-select v-model="question.repoId" clearable placeholder="选择或搜索题库" @change="search">
            <el-option v-for="item in repoList" :key="item.id" :label="item.title" :value="item.id">
            </el-option> </el-select></span>
        <span class="bank_search"><el-input v-model="question.content" placeholder="题目内容"
            @input="search"></el-input></span>
      </div>
      <span class="bank_btn"><el-button icon="el-icon-plus" size="small" type="primary"
          @click="goadd">添加</el-button></span>
      <div class="bank_selet" v-show="this.multipleSelection.length != 0">
        <span>
          <el-select v-model="value" :placeholder="cipplaceholder" @change="del">
            <el-option key="删除" label="删除" value="删除">
            </el-option> </el-select></span>
      </div>
    </div>
    <div class="bank_cent">
      <el-table :data="tableData" style="width: 100%;height: 50vh;overflow-y: scroll;" ref="multipleTable" :header-cell-style="{ background: '#f2f3f4' }"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column align="left" label="题目类型" width="180">
          <template slot-scope="scope">
            <p v-if="scope.row.quType == 1">单选题</p>
            <p v-if="scope.row.quType == 2">多选题</p>
            <p v-if="scope.row.quType == 3">判断题</p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="content" label="题目内容" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="look(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagina">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="question.currentPage" :page-sizes="[10, 20, 30, 10]" :page-size="question.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="添加试题" :visible.sync="dialogVisible" fullscreen :before-close="handleClose">
      <add v-if="isShow" @onShow="onShow" :testObj="testObj" />
    </el-dialog>


  </div>
</template>
  
<script>
import {
  questionList,
  questionSave,
  questionDelete,
  questionDetail,
  repositoryList,
} from "@/api/bank";
import add from "./add.vue"
import cache from '@/plugins/cache';

export default {
  components: {
    add
  },
  data() {
    return {
      testObj: {},
      stionList: [],
      options: [
        { label: "普通", value: 1 },
        { label: "较难", value: 2 },
      ],
      repoList: [],
      input: "",
      checked: true,
      dialogVisible: false,
      typeList: [
        { label: "单选题", value: 1 },
        // { label: "多选题", value: 2 },
        // { label: "判断题", value: 3 },
      ],
      total: null,
      types: "",

      question: {
        pageSize: 8,
        currentPage: 1,
        quType: null,
        resourceIds: [cache.session.getJSON('deptId'),100],
        content: ""
      },
      tableData: [],
      multipleSelection: [],
      value: "",
      repositoryList: {
        pageSize: 9999,
        currentPage: 1,
        resourceIds: [cache.session.getJSON('deptId'),100]
      },
      answerList: [
        {
          analysis: "",
          content: "",
          image: "",
          isRight: false,
        },
      ],
      isShow: false
    };
  },
  computed: {
    cipplaceholder() {
      return this.multipleSelection.length
        ? `已选${this.multipleSelection.length}项`
        : "111";
    },
  },
  created() {
    this.getrepositoryList();
    this.getquestionList();
  },
  methods: {
    onShow(e) {
      if (e == 1) {
        this.dialogVisible = false;
        this.getquestionList();
      } else {
        this.dialogVisible = true;
      }
    },
    look(e) {
      questionDetail({ id: e.id }).then(res => {
        Object.assign(this.testObj, res.data)
        this.dialogVisible = true;
        this.isShow = false;
        this.$nextTick(() => {
          this.isShow = true;
        })
      })
    },
    search() {
      this.getquestionList()
    },
    getquestionList() {
      questionList(this.question).then((res) => {
        if (res.success) {
          this.tableData = res.data.list;
          this.total = res.data.total;

        } else {
          this.$message({
            message: "获取失败",
            type: "warning",
          });
        }
      });
    },
    goadd() {
      this.testObj = {}

      this.dialogVisible = true;
      this.isShow = false;
      this.$nextTick(() => {
        this.isShow = true;
      })
    },
    add() {
      let obj = {
        analysis: "",
        content: "",
        image: "",
        isRight: false,
      };
      this.ruleForm.answerList.push(obj);
    },
    handleSizeChange(val) {
      this.question.pageSize = value;
      this.question.currentPage = 1;
      this.getquestionList();
    },

    handleCurrentChange(val) {
      this.question.currentPage = val;

      this.getquestionList();
    },
    handleClose() {
      this.dialogVisible = false;
    },
    getrepositoryList() {
      repositoryList(this.repositoryList).then((res) => {

        this.repoList = res.data.list;
      });
    },
    del(e) {
      this.value = "";
      this.$confirm("确实要删除吗??", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let ids = [];
          this.multipleSelection.forEach((item) => {
            ids.push(item.id);
          });
          questionDelete({ ids }).then((res) => {

            if (res.success) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getquestionList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectionChange(val) {

      this.multipleSelection = val;
    },


  },
};
</script>
  
<style lang="scss" scoped>
.bank {
  width: 100%;
  
  background: #fff;
  padding: 10px 10px;
  overflow-y: scroll;
 

  .bank_top {
    width: 100%;

    .bank_inline {
      width: 100%;

      .bank_search {
        width: 200px;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }

  .bank_selet {
    span {
      width: 130px;
      display: inline-block;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }

  .bank_cent {
    width: 100%;
    margin-top: 10px;

    .pagina {
      margin-top: 50px;
    }
  }
}
</style>
  